<template>
  <el-dialog v-model="dialogVisible" :fullscreen=true :draggable=true  :title="svrName" @close='dialogScriptClose'>
    <div class="common-layout">
      <el-container>
        <el-header class="radius-small" height="100">
          <el-form >
            <el-row>
              <el-col :span="14">
                <el-form-item label="原子服务名">
                  <el-input v-model="svrName" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="超时时长">
                    <el-input v-model="overtime" />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item >
                    <el-button type="primary" @click="scriptEdit()">编辑</el-button>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <el-form-item label="绑定工程">
                  <el-input v-model="project" />
                </el-form-item>
              </el-col>
              <el-col :span="18">
                <el-form-item label="绑定执行类">
                  <el-input v-model="serviceabsname" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-header>
        <el-container>
          <el-aside width="200px" class="radius-small">
            <el-menu default-active="unitoutput">
              <el-menu-item index="unitoutput">
                <template #title>
                  <span>原子服务输出</span>
                </template>
              </el-menu-item>
            </el-menu>
          </el-aside>
          <el-main>
            <outputparam :outputparamMap="outputparam" v-show="unitoutputshow"></outputparam>
          </el-main>
        </el-container>
      </el-container>
    </div>
  </el-dialog>
</template>

<script lang="ts">

import outputparam from './outputparam.vue'

export default {
    name: 'scriptNodeEdit',
    emits: ['dialogScriptClose'],
    props:{
      dialogVisible:{
          type: Boolean,
          default: false
      },
      nodeDataMap: {
        type:Map,
        default: { }
      }
    },
    components:{
      outputparam,
    },
    data () {
      return {
          svrName:'',
          overtime:'',
          project: '',
          serviceabsname:'',
          unitoutputshow:true,
          outputparamMap: new Map<String, Object>(),
          nodeDataInput: new Map<String, Object>([
           ['name',''], ['overtime',''], ['version','123']]),
      }
    },
    methods: {
      dialogScriptClose() {
        this.$emit('dialogScriptClose')
      },
      scriptEdit () {
       const wd = window.open('http://172.25.104.77:8443/?folder=/config/workspace/test2', '_blank','width=1400,height=700,toolbar=no,scrollbars=no,menubar=no,screenX=240,screenY=100');
       if (wd) {
         wd.document
       }
      },
    },
    computed:{
      nodeData() {
        console.log(this.nodeDataInput['version'])
        return this.nodeDataMap.get("nodeData")? this.nodeDataMap.get("nodeData"):this.nodeDataInput
      },

      outputparam() {
        const nodedata = this.nodeDataMap.get("nodeData")? this.nodeDataMap.get("nodeData"):{}

        if (nodedata == {}) {
          return 
        }
        this.outputparamMap.set("outputparam",nodedata["output-parameter"])
        return this.outputparamMap
      },
    },
    mounted () {
        // console.log(this.$route.params.nodeName)
        // this.svrName = this.$route.params.nodeName
    },

}
</script>

<style scoped>
.radius-small {
  border: 1px solid var(--el-border-color);
  border-radius: --el-border-radius-small;
  margin-top: 20px;
}
</style>